<!--
 * @Author zhaoyuemi
 * @Date 2020/10/13
 * @LastEditTime 2020/10/21
 * @LastEditors 86157
 * @Description NavHeader
 * @FilePath
 * @ router
 * @version 1.0
-->

<template>
    <div class="header">
        <div class="nav-topbar">
            <div class="container">
                <div class="topbar-menu">
                    <a href="https://www.mi.com/index.html" target="_self">小米商城</a>
                    <a href="https://home.miui.com/" target="_blank">MIUI</a>
                    <a href="https://i.mi.com/" target="_blank">云服务</a>
                    <a href="https://www.mi.com/aptitude/list" target="_blank">协议规则</a>
                </div>
                <div class="topbar-user">
                    <a href="javascript:;" v-if="username">{{username}}</a>
                    <a @click="login" href="javascript:;" v-if="!username">登录</a>
                    <a @click="logout" href="javascript:;" v-if="username">退出</a>
                    <a href="/#/order/list">我的订单</a>
                    <a @click="goToCart" class="my-cart" href="javascript:;"><span class="icon-cart"></span>购物车{{cartCount}}</a>
                </div>
            </div>
        </div>
        <div class="nav-header">
            <div class="container">
                <div class="header-logo">
                    <transition>
                        <a href="/#/index"></a>
                    </transition>
                </div>
                <div class="header-menu">
                    <div class="item-menu">
                        <span>小米手机</span>
                        <div class="children">
                            <ul>
                                <li :key="index" class="product" v-for="(item,index) in phoneList">
                                    <a :href="'/#/product/'+item.id" target="_blank">
                                        <div class="pro-img">
                                            <img :src="item.mainImage" alt="">
                                        </div>
                                        <div class="pro-name">{{item.name}}</div>
                                        <div class="pro-price">{{item.price | currency}}</div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="item-menu">
                        <span>RedMi红米</span>
                        <div class="children">
                            <ul>
                                <li :key="index" class="product" v-for="(item,index) in productArr">
                                    <a href="" target="_blank">
                                        <div class="pro-img">
                                            <img alt=""
                                                 src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b11742a0be47f9d97bb6a13ea580018d.png?thumb=1&w=160&h=110&f=webp&q=90">
                                        </div>
                                        <div class="pro-name">小米手机</div>
                                        <div class="pro-price">4899</div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="item-menu">
                        <span>电视</span>
                        <div class="children">
                            <ul>
                                <li :key="index" class="product" v-for="(item,index) in productArr">
                                    <a href="" target="_blank">
                                        <div class="pro-img">
                                            <img alt="" src="/imgs/nav-img/nav-3-1.jpg">
                                        </div>
                                        <div class="pro-name">小米电视</div>
                                        <div class="pro-price">1999</div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="header-search">
                    <div class="wrapper">
                        <input name="keyword" type="text">
                        <a href="javascript:;"></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex';

    export default {
        name: "NavHeader",
        data() {
            return {
                // username:'',
                phoneList: [],
                productArr: [{}, {}, {}, {}, {}, {}]
            }
        },
        computed: {
            ...mapState(['username', 'cartCount'])
        },
        filters: {
            currency(val) {
                if (!val) return '0.00';
                return '￥' + val.toFixed(2) + '元';
            }
        },
        mounted() {
            this.getProductList();
            let params = this.$route.params;
            if(params && params.from=='login'){
                this.getCartCount();
            }

        },
        methods: {
            getProductList() {
                this.axios.get('/api/products', {
                    params: {
                        categoryId: '100012'
                    }
                }).then((res) => {
                    if (res.list.length > 6) {
                        this.phoneList = res.list.splice(0, 6)
                    }
                })
            },
            goToCart() {
                this.$router.push('/cart')
            },
            login() {
                this.$router.push('/login')
            },
            logout() {
                this.axios.post('/api/user/logout').then(() => {
                    this.$message.success('退出成功');
                    //推出 清空userId 清空
                    this.$cookie.set('userId', '', {expires: '-1'});
                    this.$store.dispatch('saveUserName', '');
                    this.$store.dispatch('saveCartCount', '0');
                })
            },
            //获取购物车数量--
            getCartCount() {
                console.log('navjeader--getCartCount')
                this.axios.get('/api/carts/products/sum').then((res=0) => {
                    //  保存到vuex里面
                    this.$store.dispatch('saveCartCount',res);
                })
            }
        }
    }
</script>

<style lang="sass" scoped>
    @import "./../assets/scss/mixin.scss"
    @import "./../assets/scss/config.scss"
    .header
        .nav-topbar
            height: 39px
            line-height: 39px
            background-color: #333333
            color: #b0b0b0

            .container
                @include flex()

                a
                    display: inline-block
                    color: #B0B0B0
                    margin-right: 17px

                .my-cart
                    width: 110px
                    margin-right: 0
                    background: #666666
                    text-align: center

                    .icon-cart
                        @include bgImg(16px, 12px, "/imgs/icon-cart.png")
                        margin-right: 4px

                .my-cart:hover
                    background: $colorA
                    color: #ffffff

                    .icon-cart
                        background: url("/imgs/icon-cart-checked.png") no-repeat center
                        background-size: 100% 100%

        .nav-header
            .container
                position: relative
                @include flex()
                height: 112px

                .header-menu
                    display: inline-block
                    width: 643px
                    padding-left: 209px

                    .item-menu
                        display: inline-block
                        line-height: 112px
                        margin-right: 20px
                        color: #333333
                        font-weight: bold
                        font-size: 16px

                        span
                            cursor: pointer

                        .children
                            position: absolute
                            top: 112px
                            left: 0
                            width: 1226px
                            height: 0
                            opacity: 0
                            overflow: hidden
                            background: #ffffff
                            border: 1px solid $colorH
                            box-shadow: 0 7px 6px 0px rgba(0, 0, 0, 0.11)
                            transition: all .5s

                            .product
                                position: relative
                                float: left
                                width: 16.6%
                                height: 220px
                                font-size: 12px
                                line-height: 12px
                                text-align: center

                                &:before
                                    content: ''
                                    position: absolute
                                    top: 28px
                                    right: 0
                                    width: 1px
                                    height: 100px
                                    border-right: 1px solid $colorF

                                a
                                    display: inline-block

                                    .pro-img
                                        height: 137px

                                        img
                                            width: auto
                                            height: 111px
                                            margin-top: 26px

                                    .pro-name
                                        font-width: bold
                                        margin-top: 19px
                                        margin-bottom: 8px
                                        color: $colorB

                                    .pro-price
                                        color: $colorA

                        &:hover
                            color: $colorA

                            .children
                                height: 220px
                                opacity: 1

                .header-search
                    width: 319px

                    .wrapper
                        display: flex
                        align-items: center
                        height: 50px
                        border: 1px solid #E0E0E0

                        input
                            width: 250px
                            height: 50px
                            padding-left: 14px
                            border: none
                            border-right: 1px solid #E0E0E0

                        a
                            @include bgImg(18px, 18px, "/imgs/icon-search.png")
                            margin-left: 17px


</style>